<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
    <link rel="stylesheet" href="../../styles/common.css">
    <script type="text/javascript" src="../../scripts/common.js"></script>
</head>
<body>
<div id="main_body">
	<h1>z-index</h1>
  <p id="desc">说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox9.0, Chrome16.0, Safari5.1, Opera11.60</p>
    
  <h2>语法</h2>
  <p><strong>z-index</strong>: auto | integer</p>
    
  <h2>取值</h2>
  <p><strong>auto</strong>：遵从其父对象的定位</p>
  <p><strong>integer</strong>：用整数来定义堆叠级别，可以为负值。</p>
    
    <h2>说明</h2>
    <p><strong>检索或设置对象的层叠顺序。</strong></p>
    <p>并级的对象，此属性参数值越大，则被层叠在最上面。</p>
    <p>如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。</p>
    <p>必须定义position属性值为absolute、relative或fixed，此取值方可生效。
      对应的脚本特性为zIndex。</p>
    <h2>兼容性</h2>
    
  <h2>示例</h2>
    
  <table id="tutorials_table" width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td width="300">
        <div style="position:relative">
        	<div style="width:150px;height:100px;position:absolute; background-color:#096; z-index:3;"></div>
        	<div style="width:150px;height:100px;position:absolute; background-color:#09C; left:30px; top:30px; z-index:-1;"></div>
        	<div style="width:150px;height:100px;position:absolute; background-color:#C36; left:60px; top:60px; z-index:0;"></div>
        </div>
        </td>
        <td>
        <div class="codes">
          <p>&lt;div&gt;</p>
          <p>&nbsp;&nbsp;&lt;div id=&quot;green&quot;&gt;&lt;/div&gt;</p>
          <p>&nbsp;&nbsp;&lt;div id=&quot;blue&quot;&gt;&lt;/div&gt;</p>
          <p>&nbsp;&nbsp;&lt;div id=&quot;red&quot;&gt;&lt;/div&gt;</p>
          <p>&lt;/div&gt;          </p>
          <p>&nbsp;</p>
          <p>#green{z-index:3;}            </p>
          <p>#blue{z-index:-1;}            </p>
          <p>#red{z-index:0;} </p>
        </div>
        </td>
      </tr>
  </table>
</div>
</body>
</html>